<template>
	<view>
		<uni-nav-bar :fixed="true" title="成员列表" :border="false" @clickLeft="$pageBack()" left-icon="back" background-color="#ECE6D5" :status-bar="true"></uni-nav-bar>
		<view class="texts flex">
			<image src="/static/hua1.png" mode=""></image>
			投选你心中的最佳发言者吧~
		</view>
		<loadstatusVue :status="data.loadStatus">
			<view class="content">
				<view class="items flex_jc_sb" v-for="(item, index) in data.list" :key="index">
					<view class="flex items_l">
						<image class="img" v-if="item.img" :src="item.img" mode="aspectFill"></image>
						<image class="img" v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
						<view class="">{{ item.name }}</view>

						<view class="iii flex" v-if="item.isHost">
							<image src="/static/ht1.png" mode=""></image>
							<view class="">主持人</view>
						</view>
						<view class="iii flex" v-if="item.isSpeaker && data.voteTimeEnd">
							<image src="/static/ht2.png" mode=""></image>
							<view class="">最佳发言者</view>
						</view>
					</view>
					<view class="img_r flex">
						<view class="btn" v-if="!data.ist" @click="handleDelete(item)">投选</view>
						<view class="btn b1" v-if="item.isVotedByMe">已选</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
		<uni-popup ref="popupDelete" type="center">
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">投选最佳发言者</view>
				<view class="content">是否确认投选“{{ obj.name }}” 为最佳发言者？</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="confirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll, } from '@dcloudio/uni-app';
import { activitySignSpeakList,activitySignSpeakVote } from '@/api/activity.js';
import { toast, showConfirm } from '@/utils/common.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
const { proxy } = getCurrentInstance();
const data = reactive({
	ist:false,
	voteTimeEnd:false,
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		id: undefined,
		pageNum: 1,
		pageSize: 30
	}
});

// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		data.ist = res.data.vote
		data.voteTimeEnd = res.data.voteTimeEnd
		res.data.signUserList = res.data.signUserList.map((user) => {
			return {
				...user,
				// 判断是否是主持人
				isHost: user.id === res.data.emceeUserId,
				// 判断当前用户是否给这个用户投过票
				isVotedByMe: user.id === res.data.voteUserId,
				// 判断是否是发言者
				isSpeaker: res.data.kingUserIdList.includes(user.id)
			};
		});
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.data.signUserList);
		} else {
			data.list = res.data.signUserList || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.data.signUserList.signUserList && res.data.signUserList.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await activitySignSpeakList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};

const popupDelete = ref(null);
const close = () => {
	popupDelete.value.close();
};
const obj = reactive({});
const handleDelete = (item) => {
	Object.assign(obj, item);
	popupDelete.value.open();
};
const confirm = () => {
	activitySignSpeakVote({ activityId: data.queryParams.id, userId: obj.id }).then((res) => {
		if (res.code == 200) {
			toast('已投票');
			close()
			setTimeout(()=>{
				getList();
			},500)
		}
	});
};

onLoad((option) => {
	data.queryParams.id = option.id;
	getList();
});
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.Popup {
	width: 620rpx;
	height: 280rpx;
	background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 64rpx 40rpx 40rpx 40rpx;
	box-sizing: border-box;
	text-align: center;
	.content {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #4e3f23;
	}
	.btns {
		width: 280rpx;
		height: 72rpx;
		background: #e0d2bb;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 72rpx;
		margin: 60rpx auto 0rpx;
	}
}
.texts {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #75613e;
	margin: 20rpx;
	image {
		width: 32rpx;
		height: 32rpx;
	}
}
.content {
	.items {
		width: 710rpx;
		height: 112rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		.items_l {
			.img {
				width: 72rpx;
				height: 72rpx;
				border-radius: 36rpx;
				margin-right: 18rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			.iii {
				margin-left: 15rpx;
				image {
					width: 20rpx;
					height: 20rpx;
					margin-right: 6rpx;
				}
				height: 32rpx;
				background: #ede6d8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #75613e;
				padding: 0rpx 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
			}
		}
		.img_r {
			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 30rpx;
			}
			.btn {
				width: 104rpx;
				height: 52rpx;
				background: #d8c6a7;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				text-align: center;
				line-height: 52rpx;
			}
			.b1 {
				background: #d9d9d9;
				color: #ffffff;
			}
		}
	}
}
</style>
